<template>
  <page-header-wrapper>
    <!-- PageHeader 第二种使用方式 (v-slot) -->
    <template v-slot:content>
    
    </template>
    <a-card
      :bordered='false'>
      <a-steps
        class='steps'
        :current='currentTab'>
        <a-step title='填写题目信息' />
        <a-step title='确认题目信息' />
        <a-step title='完成' />
      </a-steps>
      <div class='content'>
        <!--缓存分步组件-->
        <keep-alive>
          <step1
            v-if='currentTab === 0'
            :form-data='topicForm'
            :mode="'insert'"
            @nextStep='nextStep' />
          
          <step2
            :form-data='this.topicForm'
            v-if='currentTab === 1'
            @nextStep='nextStep'
            @resData='resData'
            @prevStep='prevStep' />
          
          <step3
            v-if='currentTab === 2'
            @prevStep='prevStep'
            :response-data='responseData'
            @finish='finish' />
        </keep-alive>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import Step1 from './Step1'
import Step2 from './Step2'
import Step3 from './Step3'

export default {
  name: 'StepForm',
  components: {
    Step1,
    Step2,
    Step3
  },
  data() {
    return {
      currentTab: 0,
      // 题目信息表单
      topicForm: {
        title:'',
        score: 10,
        // 存放标签的数组
        tags: [],
        // 存放题目详细信息(markdown)
        detail: '# CTRL + Backspace 清空所有\n ' +
          '\n # 最底部有题目设置说明 \n' +
          '> 1. 点击编辑器最右边"问号"查看markdown语法\n' +
          '> 2. 其余按钮请自行研究 \n' +
          '# 题目示例如下\n' +
          '\n 给定一个整数数组 `nums` 和一个整数目标值 `target`，请你在该数组中找出 **和为目标值** `target`  的那**两个** 整数，并返回它们的数组下标。\n' +
          '\n' +
          '你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。\n' +
          '\n #### 示例1 \n' +
          '你可以按任意顺序返回答案。\n > 输入：nums = [2,7,11,15], target = 9\n' +
          '输出：[0,1]\n' +
          '解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。' +
          '\n #### 示例 2：\n' +
          '\n' +
          '输入：nums = [3,2,4], target = 6\n' +
          '输出：[1,2]\n' +
          '\n #### 示例 3：\n' +
          '\n' +
          '输入：nums = [3,3], target = 6\n' +
          '输出：[0,1]' +
          '\n' +
          '\n' +
          '**提示：**\n' +
          '`2 <= nums.length <= 104`\n' +
          '`-109 <= nums[i] <= 109`\n' +
          ' `-109 <= target <= 109`\n' +
          '**只会存在一个有效答案**\n',
        // 存放代码模板
        codeTemplate: `# 代码模板示例 (ctrl+A全选+Backspace进行删除)

class Solution:
    def twoSum(self, nums: List[int], target: int) -> List[int]:`
      },
      // 响应数据
      responseData: {}
    }
  },
  watch: {
    topicForm: {
      handler(newVal, oldVal) {
        this.topicForm = newVal
      },
      deep: true
    }
  },
  methods: {
    
    // 下一步
    nextStep(values) {
      this.topicForm = values
      if (this.currentTab < 2) {
        this.currentTab += 1
      }
    },
    // 上一步
    prevStep(values) {
      if (this.currentTab > 0) {
        this.currentTab -= 1
      }
      this.topicForm = values
    },
    // 完成填写后重置表单
    finish() {
      this.topicForm = {}
      this.currentTab = 0
      this.responseData = {}
    },
    resData(responseData) {
      this.responseData = responseData
    }
  }
}
</script>

<style lang='less' scoped>
.steps {
  max-width: 750px;
  margin: 16px auto;
}
</style>
